<template>
  <div class="fav-container">
    <div style="display: flex;justify-content: flex-start; width: 100%; flex-wrap: wrap;margin-left: 20px;">
      <div
        v-for="(video, index) in videos"
        :key="index"
        class="video-item"
      >
        <Video :videoData="video"></Video>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Video from '../../components/videoComponents.vue'
import service from '../../service/service'
import { useUserStore } from '../../stores/user'
const userStore = useUserStore()
onMounted(() => {
  getUserPublish()
})

const videos = ref([])
const getUserPublish = () => {
  service({
    method: 'get',
    url: '/wuli-video/user/' + userStore.userinfo.id,
  }).then((result: any) => {
    console.log(result.data.data)
    const formattedVideos = result.data.data.map((video: any) => {
      const formattedDate = new Date(video.createDateTime)
        .toISOString()
        .split('T')[0]
      return {
        ...video,
        createDateTime: formattedDate,
      }
    })
    console.log(formattedVideos)
    videos.value = formattedVideos
  })
}
</script>

<style scoped>
.fav-container {
  margin-top: 10px;
  width: 100%;
  background-color: white;
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.024),
    100px 100px 80px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  display: flex;
  justify-content: center; /* 居中对齐 */
  padding: 20px;
}

.video-item {
  width: calc(25% - 10px); /* 每行四个，宽度为四分之一并留有一些间距 */
  margin-bottom: 20px; /* 调整间距 */
}
</style>
